<template>
  <div class>
    <el-card>
      <el-button type="primary" size="small" @click="getNewChenked">确定</el-button>
    </el-card>
    <el-card>
      <div class="box">
        <div class="left">
          <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="i in list" :key="i.id" :label="i.roleName" :name="i.id"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="right">
          <el-tabs>
            <el-tab-pane label="桌面信息">
              <el-table stripe :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" border style="width: 100%" size="mini">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" width="60px" align="center" label="序号"></el-table-column>
                <el-table-column align="center" prop="title" label="桌面名称"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      activeName: "",
      list: [],
      functionList: [],
      tableData: [],
      multipleSelection: []
    };
  },
  computed: {},
  mounted() {
    this.init();
    this.getPotList();
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取所有桌面信息
    getPotList() {
      this.$api
        .formPost(  "/api/biz/potal/potSet/doGetList", {})
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.tableData = res.retBody.list;
          }
        });
    },

    handleClick(tab, event) {
      this.activeName = tab.name;
      console.log(this.activeName);
      this.$refs.multipleTable.clearSelection();
      let params = {
        roleId: this.activeName
      };
      this.$api
        .formPost(  "/api/biz/potal/potRoleRef/doGetList", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            var roleRefList = res.retBody.list;
            this.tableData.forEach(item => {
              roleRefList.forEach(item1 => {
                if (item.id == item1.potId) {
                  this.$refs.multipleTable.toggleRowSelection(item);
                  //this.multipleSelection.push(item);
                }
              });
            });
          }
        });
    },

    init() {
      this.$api
        .formPost(  "/api/auth/sysrole/doGetList", {})
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.list = res.retBody.list;
            this.activeName = this.list[0].id;
            this.$api
              .formPost(  "/api/biz/potal/potSet/doGetList", {})
              .then(res => {
                if (res.retHead.code == "0000000") {
                  this.tableData = res.retBody.list;
                  let params = {
                    roleId: this.list[0].id
                  };
                  this.$api
                    .formPost(
                        "/api/biz/potal/potRoleRef/doGetList",
                      params
                    )
                    .then(res => {
                      if (res.retHead.code == "0000000") {
                        var roleRefList = res.retBody.list;
                        this.tableData.forEach(item => {
                          roleRefList.forEach(item1 => {
                            if (item.id == item1.potId) {
                              this.$refs.multipleTable.toggleRowSelection(item);
                              //this.multipleSelection.push(item);
                            }
                          });
                        });
                      }
                    });
                }
              });
          }
        });
    },
    getNewChenked() {
      if (this.activeName == 0) {
        this.$message.error("请选择要保存的角色");
        return;
      }
      if (this.multipleSelection == "") {
        this.$message.error("请选择要显示的桌面");
        return;
      }
      let potRoleRef = {
        roleId: this.activeName
      };
      this.$api
        .formPost(
            "/api/auth/sysuser/doGetListWithRoleId",
          potRoleRef
        )
        .then(res => {
          let params = {
            potRoleRef: potRoleRef,
            potSetList: this.multipleSelection,
            sysUserList: res.retBody.list
          };
          this.$api
            .post(  "/api/biz/potal/potRoleRef/doSubmit", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "添加成功！",
                  type: "success"
                });
              } else {
                this.$message({
                  message: "添加失败！",
                  type: "error"
                });
              }
            });
        });
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.box {
  overflow: hidden;
  .left,
  .right {
    float: left;
    width: 200px;
  }
  .right {
    width: calc(100% - 200px);
  }
}
</style>